<template>
	<view>
		<!-- 操作弹窗 -->
		<u-popup v-model="open" :mode="params.mode" :border-radius="params.borderRadius" 
		:closeable="params.closeable" :close-icon-pos="params.closeIconPos" @close="close" >
				<view class="frame">
					<!-- <view class="submit-frame" @click="close">确定</view> -->
					<view class="flexcenter frame-title">{{title}}</view>
					
					<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: '1130rpx'}"
					:scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" @scroll="scrollTouch" @scrolltolower="scrolltolowerTouch">
					<!-- 消息内容 -->
					<view class="chat-frame" v-for="(message,index) in messages" :key="index">
						<!-- 消息时间 -->
						<view class="chat-time flexcen" v-if="message.type=='time'">{{message.content}}</view>
						 <!-- 邀请通知 -->
						<!-- <view class="tips-name" style="display: flex;justify-content: center;margin-top: 20px;padding:0rpx 32rpx;" v-if="index == 0">
							<text>张三</text>
							<span style="font-weight: 400;font-size: 24rpx;color: #858585;margin-left: 24rpx;text-align: center;">邀请李四、XXX、XXX 加入此群，新成员入群可查看所有] 历史消息</span>
						  </view> -->
						  <view :class="message.sender==='me'?'chat-message-me':'chat-message-other'" :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}">
							  <!--            消息头像-->
							  <view :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
								<image :src="avatar" @click="add" class="examineeFace_logo_style" />
							  </view>
							  <!--          消息-->
							  <view :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
								<!--            消息上面-->
								<view :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'">
								  <view>姓名</view>
								</view>
								<!--   消息内容-->
								<view :class="message.sender==='me'?'':'flexal'">
									<!-- 文本消息 -->
								<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'text' ">
								  {{ message.content }}
								</view>
								<!-- 图片消息 -->
								<u-image width="300rpx" :src="message.content" @click="previewImages(index,message)" v-if="message.type == 'image' " mode="widthFix" :border-radius="8"></u-image>
								 <!-- 视频消息 -->
								<view v-if="message.type == 'video' " class="flexcenter" @click="previewImages(index,message)">
								<video :show-center-play-btn="false" :controls="false" :src="message.content" class="meesage-img" ></video>
								<image src="/static/message/payIcon.png" style="width: 60rpx;height: 60rpx;position: absolute;"></image>
								</view>
								<!-- 文件消息 -->
								<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'file' ">
									<view  :style="{'display': 'flex','justify-content': 'space-between','flex-direction': message.sender==='me'? 'row':'row-reverse'}">
									<view :style="{'margin-left':message.sender==='me'? '0px': '10px','margin-right':message.sender==='me'? '10px': '0px'}">
										<view class="meesage-file-text" style="width: 288rpx;">{{message.content}}</view>
										<view class="meesage-file-text1">{{message.size}}</view>
									</view>
									<view>
										<image :src="fileIcon(message.suffix)"  style="width: 85rpx;height: 85rpx;"> </image>
									</view>
									</view>
								</view>
								<!-- 签收消息 -->
								<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'sign' " style="width: 400rpx;" @click="go('/pages3/set/sign')">
								  <view class="sign-text">{{ message.content }}</view>
								  <view style="width: 100%;height: 0px;border: 1px solid #002565;opacity: 0.26;margin-top: 10px;"></view>
								  <view style="width: 100%;" class="flexcen">
									<view class="message-signButton flexcen" :class="message.receive? 'message-signButton-receive':''">{{message.receive? '  已签收':'未签收'}}</view>
								  </view>
								</view>
								
								 <!-- 视频通话 -->
								<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'videoCall' ">
									<view  :style="{'flex-direction': message.sender==='me'? 'row':'row-reverse'}" class="flexal">
										<view class="meesage-file-text" :style="{'margin-left':message.sender==='me'? '0px':'19rpx',
										'margin-right':message.sender==='me'? '19rpx':'0px'}">{{message.content}}</view>
										<image src="/static/message/videoCall.png"  style="width: 38rpx;height: 25rpx;" />
									</view>
								</view>
								
								 <!-- 语音通话 -->
								<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'audioCall' ">
									<view  :style="{'flex-direction': message.sender==='me'? 'row':'row-reverse'}" class="flexal">
										<view class="meesage-file-text" :style="{'margin-left':message.sender==='me'? '0px':'19rpx',
										'margin-right':message.sender==='me'? '19rpx':'0px'}">{{message.content}}</view>
										<img src="/static/message/audioCall.png"  style="width: 41rpx;height: 32rpx;" />
									</view>
								</view>
								
								 <!-- 视频会议消息 -->
								 <view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'meeting' " style="width: 250px;">
								  <view class="flexal" style="margin-bottom: 28rpx;margin-top: 15rpx;">
									<image src="/static/message/video.png"  style="width: 41rpx;height: 32rpx;margin-right: 18rpx;" />
									<view class="meesage-file-text" style="width: 100%;font-size: 32rpx;">{{ message.content }}</view>
								  </view>
								  <view class="flexal" style="margin-bottom: 27rpx;">
									<image src="/static/message/meetingID.png"  style="width: 34rpx;height: 33rpx;margin-right: 23rpx;" />
									<view class="meesage-file-text" style="width: 100%;">{{ message.content }}</view>
								  </view>
								  <view class="flexal" style="margin-bottom: 27rpx;">
									<image src="/static/message/meetingPeople.png"  style="width: 35rpx;height: 31rpx;margin-right: 24rpx;" />
									<view style="overflow: hidden;width: 80%;white-space: nowrap;">
									<image :src="img"  style="width: 36rpx;height: 36rpx;margin-right: 12rpx;border-radius: 50%;" v-for="(img,key) in message.peopleList" :key="key" />
									</view>
								  </view>
								  <view class="meetingButton flexcen" :class="message.finish? 'meetingButton-end':''">{{message.finish? '已结束':'正在进行中'}}</view>
								</view>
								
								 <!-- 是否已读 -->
								<view style="flex-direction: column-reverse;height: 100%;display: flex;margin-left: 18rpx;" v-if="message.sender!='me'" class="message-read" :class="message.read == 1? '':'message-read-active'">{{message.read ==1? '已读':'未读'}}</view>
								<view v-else class="message-read" style="margin-top: 16rpx;" :class="message.read == 1? '':'message-read-active'">{{message.read ==1? '已读':'未读'}}</view>
								</view>
							  </view>
							</view>
					</view>
					</scroll-view>
					
					<!-- 底部悬浮输入框 -->
					<view class="bottom-frame">
						<view style="display: flex;align-items: flex-end;">
						<u-input v-model="value" :custom-style="{'padding-left': '20rpx','max-height':'200rpx','overflow': 'auto'}" class="bottom-input" :type="inputParams.type" placeholder="输入消息" 
						:border="inputParams.border" :clearable="inputParams.clearable" :height="inputParams.height" :auto-height="inputParams.autoHeight"
						 />
						<view class="flexalign" style="margin-bottom: 30rpx;">
						<image src="/static/message/audio.png" style="width: 39rpx;height: 46rpx;margin-left: 36rpx;" @click="show = !show" ></image>
						<image src="/static/message/add.png" style="width: 46rpx;height: 45rpx;margin-left: 44rpx;margin-right: 32rpx;" @click="optShow = !optShow"></image>
						</view>
						</view>
						<view style="margin-left: 32rpx;" v-if="optShow">
						<u-line color="#707070" length="686rpx" />
						</view>
						<view style="display: flex;flex-wrap: wrap;margin-left: 5rpx;margin-bottom: 53rpx;" v-if="optShow">
							<view class="flexcumal" style="margin-left: 68rpx;margin-top: 32rpx;margin-bottom: 9rpx;" v-for="(item,index) in optList" :key="index" @click="openOptItem(item,index)">
								<image :src="item.icon" style="width: 100rpx;height: 100rpx;"></image>
								<text style="font-weight: 400;font-size: 24rpx;color: #858585;margin-top: 10rpx;">{{item.text}}</text>
							</view>
						</view>
					</view>
					
				</view>
		</u-popup>
	</view>
</template>

<script>
	import commonUtil from '../../common/commonUtil';
	export default {
		name:"message",
		props:{
			// 是否打开弹窗
			openPop:{
				type:Boolean,
				default:false
			},
			
		},
		data() {
			return {
				title:'聊天',
				open:false,
				params:{
					mode:"bottom",
					borderRadius:24,
					closeable:true,
					closeIconPos:"top-right"
				},
				avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
				inputParams:{
					// value: '',
					type: 'textarea',
					border: false,
					height: 50,
					clearable:false,
					autoHeight: true,
				},
				 value:'',
				 optList:[
					 {
						 icon:'/static/message/8c0710f3e03a25984fe24129198769f.png',
						 text:'照片'
					 },{
						 icon:'/static/message/f328aa1999e9b8de4adbb85a2cbc880.png',
						 text:'拍摄'
					 },{
						 icon:'/static/message/cb5264d17b063d1536e0d9c5213b115.png',
						 text:'视频通话'
					 },{
						 icon:'/static/message/aa8c2b4b78e63842d8426de319c39c5.png',
						 text:'位置'
					 },{
						 icon:'/static/message/585228eda04a0f7b3229e7c6a3173c9.png',
						 text:'文件'
					 },{
						 icon:'/static/message/975e4d4198594f6b8d293faacc8f7cc.png',
						 text:'云文档'
					 },{
						 icon:'/static/message/d34cdd14eb2ea758f1f73933ed88a3d.png',
						 text:'签收消息'
					 },
				 ],
				 optShow:false,
				messages: [
				 {sender: 'other', content: '文字',type:'sign',read:1,receive:0},
				 {sender: 'me', content: '文字',type:'sign',read:1,receive:1},
				 {sender: 'me', content: '通话时长 0:07',type:'videoCall',read:1,receive:1},
				 {sender: 'other', content: '对方已拒绝',type:'videoCall',read:1,receive:1},
				 {sender: 'other', content: '已取消',type:'videoCall',read:1,receive:1},
				 {sender: 'me', content: '你好！',type:'text',read:0},
				 {sender: 'other', content: '你好啊！',type:'text',read:0},
				 {sender: 'other', content: '请问有什么我可以帮助你的吗？',type:'text',read:0},
				 {sender: 'me', content: '我正在寻找一家好的餐厅。',type:'text',read:1},
				 {sender: 'other', content: '你在哪个城市？',type:'text',read:1},
				 {sender: 'me', content: '我在北京。',type:'text',read:1},
				 {sender: 'me', content: '13:52',type:'time',read:1},
				 {sender: 'other', content: '好的，我可以为您推荐一些北京的餐厅。您需要什么类型的餐厅？',type:'text',read:1},
				 {sender: 'me', content: '我想要吃火锅。',type:'text',read:1},
				 {sender: 'other', content: '好的，以下是我为您推荐的北京火锅餐厅列表：[餐厅1，餐厅2，餐厅3]。您需要我帮您预约吗？',type:'text',read:1},
				 {sender: 'me', content: 'https://cdn.uviewui.com/uview/album/1.jpg',type:'image',read:1},
				 {sender: 'other', content: 'https://www.zhongjiangwenhua.com/Upload/2024/0609/202406091540414772.jpg',type:'image',read:1},
				 {sender: 'me', content: 'https://luosai.oss-cn-shenzhen.aliyuncs.com/Upload/Video/2024/0730/202407301050064716.mp4',type:'video',read:1},
				 {sender: 'me', content: '不需要，我会自己预约。谢谢您的帮助！',type:'text',read:1},
				 {sender: 'other', content: '不客气，祝您用餐愉快！',type:'text',read:1},
				 {sender: 'other', content: '通话时长 0:07',type:'audioCall',read:1,receive:1},
				 {sender: 'me', content: '对方已拒绝',type:'audioCall',read:1,receive:1},
				 {sender: 'me', content: '已取消',type:'audioCall',read:1,receive:1},
				 {sender: 'me', content: '再见！',type:'text',read:1},
				 {sender: 'other', content: '再见！',type:'text',read:1},
				 {sender: 'other', content: '标题内容文字文字文文字标题内容文字文字文文字.pdf',type:'file',read:1,suffix:'pdf',size:'100KB'},
				 {sender: 'me', content: '标题内容文字文字文文.xlx',type:'file',read:1,suffix:'xlx',size:'100KB'},
				 {sender: 'other', content: '视频会议名称',type:'meeting',read:1,meetingId:'会议ID:1234567',
				 peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				 ],
				 finish:0,
				 },
				 {sender: 'me', content: '视频会议名称',type:'meeting',read:0,meetingId:'会议ID:1234567',
				 peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				 ],
				 finish:1,
				 },
				 ],
				 style: {
					 pageHeight: 0,
					 contentViewHeight: 0,
					 footViewHeight: 90,
					 mitemHeight: 0
				 },
				 scrollTop:0,
				 isScrollTop:true,					//是否要自动到底
				 scrollAnimation:false,				//滑动动画是否开启
			};
		},
		mixins:[commonUtil],
		watch: {
			// New: 新值 | Old: 老值
			openPop(New, Old) {
				this.open = New
				console.log(`新值:${New} ——— 老值:${Old}`)
				if(New){
					const res = uni.getSystemInfoSync();   //获取手机可使用窗口高度     api为获取系统信息同步接口
				　　　this.style.pageHeight = res.windowHeight;
				　　　this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
				　　　this.$nextTick(()=>{
					 this.scrollToBottom();   //创建后调用回到底部方法
					 })
				}
				
			},
		},
		mounted() {
			 
			
		},
		methods:{
			// 文件消息图标
			fileIcon(suffix){
				let fileIcon = []
				fileIcon['ppt'] = '/static/message/ppt.png'
				fileIcon['pdf'] = '/static/message/pdf.png'
				fileIcon['word'] = '/static/message/word.png'
				fileIcon['xlx'] = '/static/message/xlx.png'
				fileIcon['package'] = '/static/message/package.png'
				console.log('fileIcon',fileIcon)
				
				return fileIcon[suffix]
			},
			// 添加记录
			add(){
				this.messages.push( {sender: 'me', content: '你好！',type:'text',read:0},)
				if(this.isScrollTop){
					this.scrollToBottom()
				}
			},
			// 滑动聊天记录
			scrollTouch(e){
				// console.log('滑动',e)
				if(e.detail.deltaY > 0){
					console.log('当前是下拉，查看顶部消息')
					this.isScrollTop = false
				}else{
					console.log('当前是上滑')
				}
			},
			// 滑动到底
			scrolltolowerTouch(e){
				console.log('滑动到底了',e)
				this.isScrollTop = true
				this.scrollAnimation = true
			},
	　　　	/**
			 * @author gongliying
			 * @date 2019-07-26
			 * @information 跳转页面底部
			 */
			scrollToBottom () {
				let that = this;
				console.log('调用')
				let query = uni.createSelectorQuery();
				// query.selectAll('.frame-tips').boundingClientRect();
				query.selectAll('.chat-frame').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
					console.log('res',res)
					that.style.mitemHeight = 0;
					res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度
					if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight     //用子元素的高度减去显示的高度就获益获得序言滚动的高度
					}
					console.log('scrollTop',that.scrollTop)
	　　　　　　　})
			},
			// 图片点击预览轮播
			previewImages(index,item){
				// 当为音频形式的时，点击进行音频播放，不处理
				// if (this.list[index].type !== "mp4") {
					// this.previeShow = false;
					let list = []
					console.log('item',item)
					if(item.type == 'video'){
						list.push({url:item.content,type:'video'})
					}else{
						list.push({url:item.content,type:'jpg'})
					}
					index = 0
					var stateObj = {};
					let that = this;
					let onjs = JSON.stringify(list)
					uni.navigateTo({
						url: '/pages2/pages/kxj-previewImage/kxj-previewImage?onjs='+onjs+'&index='+index+'&id='+1,
						events: {
							// 监听子组件传过来的值，这儿为了实现联动效果，
							// 即：预览翻到某一图片/视频，轮播图同样滚动到相关的地方
							changePreviewIndex(index){
								that.$refs.myswiper.index = index;
							},
						}
					});
				// }
			},
		},
	}
</script>

<style lang="less">
	.frame{
		width: 750rpx;
		height: 1300rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}
	.frame-title{
		margin-top: 20rpx;
		font-weight: normal;
		font-size: 36rpx;
		color: #000000;
	}
	.chat-frame{
		
	 .chat-time{
		  width: 100%;
		margin-top: 36rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #858585;
		}
		.tips-name{
			margin-top: 63rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #0052D9;
			// width: 100%;
		  }
		  .chat-message-other {
		    /*background-color: red;*/
		    display: flex;
		    padding-left: 1rem;
		    padding-top: 1rem;
		  }
		  
		  .chat-message-me {
		    /*background-color: red;*/
		    display: flex;
		    padding-right: 32rpx;
		    padding-top: 1rem;
		    flex-direction: row-reverse; /* 将子view的顺序反转 */
		  
		  }
		  
		  .message-me-asWhole-headPortrait {
		    padding: 6rpx;
		  }
		  
		  .message-other-asWhole-headPortrait {
		    padding: 6rpx;
		  }
		  
		  .message-me-asWhole-right {
		    display: flex;
		    flex-direction: column; /* 设置子元素垂直排列 */
		    margin-left: 0.1rem;
		  }
		  
		  .message-other-asWhole-right {
		    display: flex;
		    flex-direction: column; /* 设置子元素垂直排列 */
		    margin-left: 0.1rem;
		  }
		  
		  .message-me-asWhole-top {
		    padding: 6rpx;
		    /* font-size: 12px; */
		    // font-family: 微软雅黑;
		    padding: 6rpx;
		    // color: rgba(134, 144, 156, 1);
		    // direction: rtl; /* 右到左书写 */
		    text-align: right;
		    font-weight: 400;
		    font-size: 26rpx;
		    color: #6E6E6E;
		    // display: flex;
		    // justify-content: flex-end;
		  }
		  
		  .message-other-asWhole-top {
		    padding: 6rpx;
		    /* font-size: 12px; */
		    // font-family: 微软雅黑;
		   font-weight: 400;
		   font-size: 26rpx;
		   color: #6E6E6E;
		    padding: 6rpx;
		    // color: rgba(134, 144, 156, 1);
		  }
		  
		  .message-me {
		    // background-color: rgba(242, 243, 245, 1);
			background: #D2E3FF;
		    max-width: 467rpx;
		    word-wrap: break-word; /* 处理英文单词换行 */
		    word-break: break-all; /* 处理中文换行 */
		    display: inline-block; /*将view元素转换为行内块元素*/
		    width: auto; /* 宽度根据文本宽度自动调正*/
			font-weight: 400;
		    padding: 12rpx 24rpx;
		    border-radius: 8rpx;
		    font-size: 32rpx;
		    color: #333333;
		  }
		  
		  .message-other {
		    // background-color: rgba(242, 243, 245, 1);
			background: #D2E3FF;
		    max-width: 467rpx;
		    word-wrap: break-word; /* 处理英文单词换行 */
		    word-break: break-all; /* 处理中文换行 */
		    display: inline-block; /*将view元素转换为行内块元素*/
		    width: auto; /* 宽度根据文本宽度自动调正*/
			font-weight: 400;
		    padding: 12rpx 24rpx;
		    border-radius: 8rpx;
		    font-size: 32rpx;
		    color: #333333;
		  }
		   .examineeFace_logo_style {
		      width: 100rpx;
		      height: 100rpx;
		      border-radius: 50%;
		    }
		.message-read{
				font-weight: 400;
				font-size: 26rpx;
				color: #6E6E6E;
		  }
		  .message-read-active{
			color: #36A8F4;
		  }
		  .meesage-file-text{
			 font-weight: 400;
			 color: #333333;
			 font-size: 32rpx;
			 // width: 288rpx;
			 display: -webkit-box;          /* 需要使用 -webkit- 前缀 */
			 -webkit-box-orient: vertical;  /* 垂直布局 */
			 overflow: hidden;              /* 隐藏超出的内容 */
			 text-overflow: ellipsis;       /* 省略号 */
			 -webkit-line-clamp: 2;         /* 显示的行数 */
		 }
		 .meesage-file-text1{
			 margin-top: 5px;
			 font-weight: 400;
			 font-size: 26rpx;
			 font-weight: 400;
			 color: #6E6E6E;
		 }
		 .message-signButton{
			 margin-top: 24rpx;
			 width: 231rpx;
			 height: 52rpx;
			 border-radius: 8rpx;
			 border: 2rpx solid #FF3400;
			 color: #FF3400;
			 font-weight: 400;
			 font-size: 26rpx;
		   }
	 
		   .message-signButton-receive{
			 border: 2rpx solid #858A99;
			 color: #858A99;
		   }
		   .sign-text{
			   font-weight: 400;
			   font-size: 32rpx;
			   color: #333333;
		   }
		   .meetingButton{
			   margin-top: 47rpx;
			   margin-bottom: 17rpx;
			   width: 100%;
			   height: 68rpx;
			   font-size: 28rpx;
			   color: #0052D9;
			   font-weight: 400;
			   border-radius: 16rpx;
			   border: 1rpx solid #0052D9;
			 }
			 .meetingButton-end{
			   border: 1rpx solid #858A99;
			   color: #858A99;
			 }
			 .meesage-img {
			 	  max-width: 295rpx;
			 	  max-height: 396rpx;
			 	  // width: 100%;
			 	  // height: 100%;
			 	  border-radius: 4px;
			 }
	}
	.chat-window{
		// background: #000;
		margin-top: 20rpx;
	}
	.bottom-frame{
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		// height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(9,4,114,0.1);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 100;
		.bottom-input{
			margin-top: 15rpx;
			margin-left: 32rpx;
			width: 521rpx;
			background: #F6F6F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
		}
	}
</style>